<script setup name="formFileReport">
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted
	} from 'vue';

	import api from '@/api/api';
	import util from '@/utils/util';

	// Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。
	// 组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性
	const modelValue = defineModel();

	const scrollbarRef = ref(null);
	let intervalId = null;
	// 自动滚动逻辑
	function startAutoScroll() {
		const scrollWrap = scrollbarRef.value.wrapRef;
		if (!scrollWrap) return;
		intervalId = setInterval(() => {
			if (scrollWrap.scrollTop + scrollWrap.clientHeight >= scrollWrap.scrollHeight - 1) {
				// 如果接近底部，则重置滚动位置
				scrollWrap.scrollTop = 0;
			} else {
				// 否则继续向下滚动
				scrollWrap.scrollTop += 1;
			}
		}, 30); // 每隔30毫秒滚动一次
	};
	// 在组件挂载后开始自动滚动
	onMounted(() => {
		setTimeout(() => {
			// startAutoScroll();
		}, 1000)
	});
	// 在组件卸载前清除定时器
	onUnmounted(() => {
		clearInterval(intervalId);
	});

	// 回调
	const emit = defineEmits(["change", ""]);
</script>

<template>
	<div class="table-head table-li">
		<p>类型</p>
		<p>实验项目</p>
		<p>实验室</p>
		<p>实验中心</p>
	</div>
	<el-scrollbar ref="scrollbarRef">
		<template v-for="(item,index) in 20" :key="index">
			<div class="table-li">
				<p class="dfaic">
				<div class="span" :class="`color${index%3}`"></div>
				工位预约
				</p>
				<p>NaOH溶液浓度的标定及食醋中总酸度的测定</p>
				<p>有机化学实验室（一）</p>
				<p>基础物理实验教学中心</p>
			</div>
		</template>
	</el-scrollbar>
</template>

<style lang="scss" scoped>
	.table-li {
		text-align: left !important;

		.dfaic {
			display: flex;
			align-items: center;
			gap: 10px;

			.span {
				width: 10px;
				height: 10px;
				border-radius: 100px;
			}
		}


		.color0 {
			background: #00C9FF;
		}

		.color1 {
			background: #FFE853;
		}

		.color2 {
			background: #FF5880;
		}
	}
</style>